<template>
  <div>
    <ay-aside :page-info="pageInfo" />
    <div class="app-container">
      <div class="filter-container">
        <el-collapse v-model="filterNameKey" @change="handleChange">
          <el-collapse-item title="筛选条件" name="1">
            <el-row>
              <el-input v-model="search.keyId" placeholder="主键ID" style="width: 200px;" class="filter-item" />
              <el-input v-model="search.memberId" placeholder="会员ID" style="width: 200px;" class="filter-item" />
              <el-input v-model="search.gatherId" placeholder="收款方会员ID" style="width: 200px;" class="filter-item" />
              <el-input v-model="search.orderNum" placeholder="订单号" style="width: 200px;" class="filter-item" />
              <el-select v-model="search.orderStatus" placeholder="订单状态" clearable style="width: 200px" class="filter-item">
                <el-option :key="0" label="待支付" :value="3" />
                <el-option :key="1" label="已支付" :value="50" />
              </el-select>
              <el-select v-model="search.payMethod" placeholder="支付方式" clearable style="width: 200px" class="filter-item">
                <el-option :key="0" label="未知" :value="3" />
                <el-option :key="1" label="余额转入" :value="50" />
                <el-option :key="2" label="微信转入" :value="50" />
                <el-option :key="3" label="支付宝转入" :value="50" />
                <el-option :key="4" label="云闪付转入" :value="50" />
              </el-select>
              <el-select v-model="search.shareStatus" placeholder="分润状态" clearable style="width: 200px" class="filter-item">
                <el-option :key="0" label="未分润" :value="3" />
                <el-option :key="1" label="分润成功" :value="50" />
                <el-option :key="2" label="分润失败" :value="50" />
              </el-select>
              <el-select v-model="search.canStatus" placeholder="划付状态" clearable style="width: 200px" class="filter-item">
                <el-option :key="0" label="未划付" :value="3" />
                <el-option :key="1" label="划付成功" :value="50" />
                <el-option :key="2" label="划付失败" :value="50" />
              </el-select>
              <el-date-picker v-model="createTimeTemp" class="filter-item" type="datetimerange" range-separator="至" start-placeholder="创建开始日期" end-placeholder="创建结束日期" />
              <el-date-picker v-model="canTimeTemp" class="filter-item" type="datetimerange" range-separator="至" start-placeholder="划付开始日期" end-placeholder="划付结束日期" />
            </el-row>
          </el-collapse-item>
        </el-collapse>
        <el-row>
          <el-button v-waves class="filter-item refresh-btn" icon="el-icon-refresh" @click="handleRefresh" />
          <transition name="el-zoom-in-center">
            <el-button v-show="isShowFilterBtn" v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </transition>
          <transition name="el-zoom-in-center">
            <el-button v-show="isShowFilterBtn" v-waves class="filter-item" type="danger" icon="el-icon-close" @click="handleReset">重置</el-button>
          </transition>
        </el-row>
      </div>
      <el-table v-loading="listLoading" :data="tableData" border highlight-current-row style="width: 100%;">
        <el-table-column label="#" align="center" width="60">
          <template slot-scope="{$index}">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="主键ID" align="center" min-width="100px">
          <template slot-scope="{row}">
            <span>{{ row.memberId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会员ID" align="center" min-width="100px">
          <template slot-scope="{row}">
            <span>{{ row.shopName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单类型" align="center" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.cMS013Data }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" min-width="120px">
          <template slot-scope="{row}">
            <span>{{ row.cMS013Data }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单总金额" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span>{{ row.ua_mapp_no }}</span>
          </template>
        </el-table-column>
        <el-table-column label="共享值" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span>{{ row.ua_company_no }}</span>
          </template>
        </el-table-column>
        <el-table-column label="共享值状态" align="center" width="120px">
          <template slot-scope="{row}">
            <span>{{ row.auditStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商家获得金额" align="center" width="160px">
          <template slot-scope="{row}">
            <span>{{ row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商家所属会员ID" align="center" width="120px">
          <template slot-scope="{row}">
            <span>{{ row.auditDescription }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="120px">
          <template slot-scope="{row}">
            <span>{{ row.auditStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理时间" align="center" width="120px">
          <template slot-scope="{row}">
            <span>{{ row.auditStatus }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="pageTotal > 0" :total="pageTotal" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import AyAside from '@/components/Aside'
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves' // waves directive
// import { qrcodeOrders } from '@/api/particular'
export default {
  components: { AyAside, Pagination },
  directives: { waves },
  data() {
    return {
      pageInfo: {},
      filterNameKey: '1', // 折叠面板当前激活面板
      isShowFilterBtn: true, // 是否显示搜索按钮
      search: {
        keyId: '', // 主键ID
        memberId: '', // 会员ID
        gatherId: '', // 收款方会员ID
        orderNum: '', // 订单号
        orderStatus: '', // 订单状态
        payMethod: '', // 支付方式
        createTime: '', // 创建时间
        shareStatus: '', // 分润状态
        canStatus: '', // 划付状态
        canTime: '' // 划付时间
      },
      createTimeTemp: '', // 创建时间中间量
      canTimeTemp: '', // 划付时间中间量
      listLoading: false,
      tableData: [
        { id: 0 },
        { id: 1 },
        { id: 2 }
      ],
      pageNum: 1,
      pageSize: 10,
      pageTotal: 0
    }
  },
  created() {
    this.pageInfo = this.$route.meta
    this.getList()
  },
  methods: {
    // 搜索折叠面板
    handleChange(val) {
      if (val.length === 0) {
        this.isShowFilterBtn = false
      } else {
        this.isShowFilterBtn = true
      }
    },
    // 刷新
    async handleRefresh() {
    //   if (await this.getList()) {
    //     this.$message({
    //       message: '刷新成功',
    //       type: 'success'
    //     })
    //   }
    },
    // 筛选查询操作
    handleSearch() {
    //   this.pageNum = 1
    //   this.getList()
    },
    // 重置操作
    handleReset() {
    //   this.search = {
    //     shopName: '', // 店铺名称
    //     memberId: '', // 会员id
    //     auditStatus: '', // 签约状态
    //     submitTime: '' // 提交时间
    //   }
    //   this.submitTimeTemp = ''
    //   this.pageNum = 1
    //   this.getList()
    },
    // 获取表格数据接口
    getList() {
    //   this.listLoading = true
    //   return new Promise((resolve, reject) => {
    //     const param = {}
    //     Object.assign(param, {
    //       page: 0,
    //       limit: 10,
    //       qro_id: '', // 主键ID
    //       qro_mid: '', // 会员ID
    //       qro_store_mid: '',  // 收款方会员ID
    //       qro_tid: '', // 订单号
    //       qro_status: '', // 订单状态 0待支付 1已支付
    //       qro_pay_type: '', // 支付方式 0未知 1余额转入 2微信转入 3支付宝转入 4云闪付转入
    //       qro_create_time: '', // 创建时间
    //       split_state: '', // 分润状态 0未分润 1分润成功 2分润失败
    //       payment_pay_status: '', // 划付状态 0未划付 1划付成功 2划付失败
    //       payment_pay_time: '' // 划付时间
    //     })
    //     qrcodeOrders(param).then(response => {
    //       console.log(response)
    //     //   this.tableData = response.data.list
    //     //   this.pageTotal = response.data.total
    //     //   this.listLoading = false
    //       resolve(true)
    //     }).catch(error => {
    //       this.$message({
    //         message: error,
    //         type: 'error'
    //       })
    //       reject(false)
    //     })
    //   })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .filter-container{
    .el-collapse {
      margin-bottom: 10px;
      .el-collapse-item {
        .el-collapse-item__header {
          font-weight: 600;
        }
      }
    }
    .filter-item {
      margin-left: 0;
      &.refresh-btn{
        background-color: #030303;
        color: azure;
      }
    }
  }
}
</style>
